<template>
  <div>
    <el-table
      style="width: 100%;   text-align: center; font-size:14px;margin-top:80px"
      :data="
        tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)
      "
      :default-sort="{ prop: 'date', order: 'descending' }"
      height="540px"
      fit
    >
     <el-table-column
      type="selection"
       >
    </el-table-column>
      <el-table-column prop="name" label="姓名" sortable> </el-table-column>
      <el-table-column prop="department" label="所属部门" sortable>
        <template slot-scope="scope">
          <el-tag>{{ scope.row.department }}</el-tag>
        </template></el-table-column
      >
      <el-table-column prop="month" label="入职日期" sortable> </el-table-column>
      <el-table-column label="上季度绩效" sortable prop="lc">
        <template slot-scope="scope">
          <el-tag
          :type="scope.row.type"
          effect="dark"
          size="medium"
          >{{ scope.row.lc }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="basic" label="综合绩效" sortable>
          <template slot-scope="scope">
          <el-tag
          :type="scope.row.type2"
          effect="dark"
          size="medium"
          >{{ scope.row.comment }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="reword" label="考勤情况" sortable>
      </el-table-column>
      <el-table-column  label="公司评价" sortable>
       <template slot-scope="scope">
         <el-rate
    v-model="scope.row.mark"
    :colors="colors">
  </el-rate>
       </template>
      </el-table-column>
      <el-table-column label="操作">
          <template slot-scope="scope">
              <el-button type="success" plain  >查看详情</el-button>
          </template>
      </el-table-column>
    </el-table>
    <el-pagination
      alian="center"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-size="pageSize"
      layout="total, prev, pager, next"
      :total="tableData.length"
      style="position:absolute;right:20px"
    >
    </el-pagination>
  </div>
</template>
<script>
import api from "@/api/payment";
export default {
  data() {
    return {
      tableData: [],
      //当前页数
      currentPage: 1,
      //一页几条数据
      pageSize: 10,
      //评价
        value2: 5,
        colors: ['#99A9BF', '#F7BA2A', '#FF9900']  // 等同于 { 2: '#99A9BF', 4: { value: '#F7BA2A', excluded: true }, 5: '#FF9900' }
    };
  },
  methods: {
    formatter(row, column) {
      return row.address
    },
    //获取工资列表
    getList() {
      let that = this
      api
        .getList()
        .then((response) => {
          console.log(response.data)
          that.tableData = response.data.list
          for(let i=0;i<that.tableData.length;i++){
            if(that.tableData[i].lc=='A') that.tableData[i].type='success'
            else if(that.tableData[i].lc=='B') that.tableData[i].type=''
            else if(that.tableData[i].lc=='C') that.tableData[i].type='warning'
            else that.tableData[i].type='danger'
            if(that.tableData[i].comment=='A') that.tableData[i].type2='success'
            else if(that.tableData[i].comment=='B') that.tableData[i].type2=''
            else if(that.tableData[i].comment=='C') that.tableData[i].type2='warning'
            else that.tableData[i].type2='danger'
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //每页条数改变时触发 选择一页显示多少行
    handleSizeChange(val) {
      this.currentPage = 1;
      this.pageSize = val;
    },
    //当前页改变时触发 跳转其他页
    handleCurrentChange(val) {
      this.currentPage = val;
    },
    //跳转到员工绩效详情页
    showEmployee(id){
      this.$router.push({path:'oneEmployee',query:{id:"id"}})
    }
  },
  created() {
    this.getList();
  }
};
</script>
 